<template>
  <div class="app-container">
    <div class="search-bar p-10">
      <h2>{{ t("payment.ecpay.title") }}</h2>
      <el-form ref="formRef" :model="formData" :rules="rules">
        <el-form-item :label="$t('payment.ecpay.PaymentUrl')" prop="PaymentUrl">
          <el-input ref="PaymentUrl" v-model="formData.PaymentUrl" size="large" name="PaymentUrl" />
        </el-form-item>
        <el-form-item :label="$t('payment.ecpay.MerchantID')" prop="MerchantID">
          <el-input ref="MerchantID" v-model="formData.MerchantID" size="large" name="MerchantID" />
        </el-form-item>
        <el-form-item :label="$t('payment.ecpay.HashKey')" prop="HashKey">
          <el-input ref="HashKey" v-model="formData.HashKey" size="large" name="HashKey" />
        </el-form-item>
        <el-form-item :label="$t('payment.ecpay.HashIV')" prop="HashIV">
          <el-input ref="host" v-model="formData.HashIV" size="large" name="HashIV" />
        </el-form-item>
        <el-form-item :label="$t('payment.ecpay.ReturnURL')" prop="ReturnURL">
          <el-input ref="ReturnURL" v-model="formData.ReturnURL" size="large" name="ReturnURL" />
        </el-form-item>
        <el-form-item :label="$t('payment.ecpay.OrderResultURL')" prop="OrderResultURL">
          <el-input
            ref="OrderResultURL"
            v-model="formData.OrderResultURL"
            size="large"
            name="OrderResultURL"
          />
        </el-form-item>

        <el-button :loading="loading" type="primary" class="w-auto" @click.prevent="submitForm">
          {{ $t("common.submit") }}
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref } from "vue";
import PaymentAPI, { PaymentConfigForm } from "@/api/system/payment";

const { t } = useI18n();
const formRef = ref(ElForm);
const loading = ref(false);
const labelWidth = ref(120);

const formData = reactive<any>({
  PaymentUrl: "",
  MerchantID: "",
  HashKey: "",
  HashIV: "",
  ReturnURL: "",
  OrderResultURL: "",
});

const postData = reactive<PaymentConfigForm>({
  paymentName: "ecpay",
  config: "",
});

const rules = computed(() => {
  return {
    PaymentUrl: [
      {
        required: true,
        message: t("common.plsInput") + t("payment.ecpay.PaymentUrl"),
        trigger: "blur",
      },
    ],
    MerchantID: [
      {
        required: true,
        message: t("common.plsInput") + t("payment.ecpay.MerchantID"),
        trigger: "blur",
      },
    ],
    HashKey: [
      {
        required: true,
        message: t("common.plsInput") + t("payment.ecpay.HashKey"),
        trigger: "blur",
      },
    ],
    HashIV: [
      {
        required: true,
        message: t("common.plsInput") + t("payment.ecpay.HashIV"),
        trigger: "blur",
      },
    ],
    ReturnURL: [
      {
        required: true,
        message: t("common.plsInput") + t("payment.ecpay.ReturnURL"),
        trigger: "blur",
      },
    ],
    OrderResultURL: [
      {
        required: true,
        message: t("common.plsInput") + t("payment.ecpay.OrderResultURL"),
        trigger: "blur",
      },
    ],
  };
});

async function submitForm() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      const config: any = {
        PaymentUrl: formData.PaymentUrl,
        MerchantID: formData.MerchantID,
        HashKey: formData.HashKey,
        HashIV: formData.HashIV,
        ReturnURL: formData.ReturnURL,
        OrderResultURL: formData.OrderResultURL,
      };
      postData.config = JSON.stringify(config);
      PaymentAPI.save(postData)
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage.success(t("payment.saveSuccess"));
            loading.value = false;
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .finally(() => (loading.value = false));
    }
  });
}

function getInfo() {
  PaymentAPI.getFormData("ecpay").then((res) => {
    Object.assign(formData, res);
  });
}

onMounted(() => {
  getInfo();
});
</script>
